<template>
  <el-container style="height: 100%">
    <el-aside width="200px" style="height: 100%" class="aside">
      <el-menu style="width: 100%" background-color="rgba(95, 83, 203, 0.35)" @select="handleMenuSelect">
        <el-menu-item index="1">
          <el-icon><icon-menu /></el-icon>
          <span>基本信息</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>其他信息</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-main>
      <BasicForm v-if="showForm" ref="formRef" :fields="formFields" :fieldInfo="fieldInfo"> </BasicForm>
    </el-main>
  </el-container>
</template>

<script setup>
import BasicForm from '@/components/basicform/BasicForm.vue'
import { ref } from 'vue'
import { Menu as IconMenu } from '@element-plus/icons-vue'

const showForm = ref(false)
const formRef = ref(null)
// 处理菜单项点击事件
const handleMenuSelect = (index) => {
  if (index === '1') {
    showForm.value = true
  } else {
    showForm.value = false
  }
}
// 定义父组件中的表单字段
const formFields = [
  { type: 'input', prop: 'userName', label: '用户名', width: '300px' },
  { type: 'input', prop: 'nickName', label: '昵称', width: '300px' },
  {
    type: 'radio',
    prop: 'gender',
    label: '性别',
    radios: [{ label: '男' }, { label: '女' }]
  },
  { type: 'input', prop: 'phone', label: '手机号', width: '300px' }
]
const fieldInfo = ref({ userName: '', nickName: '', gender: '', phone: '' }) // 字段信息
</script>

<style scoped>
.aside {
  background-color: rgba(95, 83, 203, 0.35);
  height: 100%;
  color: white;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
.el-menu-item {
  width: 100%;
}
.el-menu-item:hover {
  color: rgb(205, 191, 227); /* 悬停时的字体颜色 */
}
.el-menu-item.is-active {
  color: #ffff; /* 点击后的字体颜色 */
}
</style>
